<template>
    <div class="center-main">
        <section class="order-main-header">
            <mt-header :title="titleValue">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            </mt-header>
        </section>
        <!-- <section class="pro" v-if="coinType==1">
             <div class="drawer--tabs" id="drawer-tabs">
                <i class="mobile_icon_fav" v-for="(coin, i) in coinGroup" v-bind:key="i"  @click="changeGroup(i)">
                    <span class="cur upper" data-coin="usdt" :class="i==coinActive?'active':''" >{{coin}}</span>
                </i>
            </div>
        </section> -->
        <section class="proposal">
            <div  class="flex" @click="coinGroupBtn(coin)"  v-for="(coin, i) in coinGroupList" v-bind:key="i" >
                <div> {{coin.title}}</div>
                 <div  class="rotate"><img src="../../assets/my/right.png"></div>
            </div>
        </section>
    </div>
</template>
<script>
import axios from 'axios'
export default {

    name:'my',
   data(){
         return {
         sessionData:'',
         coinGroup:["最新活动"],
         coinActive:0,
         coinGroupList:[],
         coinType:'',
         titleValue:'帮助中心'
         }
    },
    mounted() {
        this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
            this.sessionData=res.data.data;
          
        })
        this.coinType=parseInt(this.$route.query.type);
           this.changeGroup(0);
           if( this.coinType==1){
               this.titleValue='官方公告';
           }else if( this.coinType==15){
               this.titleValue='平台介绍';
           }else if( this.coinType==3){
               this.titleValue='新手指引';
           }else if( this.coinType==16){
               this.titleValue='法币交易';
           }else if( this.coinType==14){
               this.titleValue='币币交易';
           }else if( this.coinType==14){
               this.titleValue='服务协议';
           }
    },
    methods: {
        changeGroup(i){
            this.coinActive=i;
            if(i==0&&this.coinType==1){
                    this.coinGroupList=[];
                this.$http.post('v1/articleList',{type: 22,pageSize: 15}).then((res)=>{
            res.data.data.forEach(item=>{
                this.coinGroupList.push(item)
            })
             })
            //  this.$http.post('v1/articleList',{type: 1,pageSize: 15,page:1}).then((res)=>{
            //  res.data.data.forEach(item=>{
            //     this.coinGroupList.push(item)
            // })
            //  })
            //  this.$http.post('v1/articleList',{type: 17,pageSize: 15}).then((res)=>{
            //  res.data.data.forEach(item=>{
            //     this.coinGroupList.push(item)
            // })
            //  })
            }
          
              if(i==0&&this.coinType==15){
                this.$http.post('v1/articleList',{type: 21,pageSize: 15,page:1}).then((res)=>{
            this.coinGroupList=res.data.data;
             })
            }
             if(i==0&&this.coinType==4){
                this.$http.post('v1/indexArticle',{ types: "3,4", size: 2 }).then((res)=>{
            this.coinGroupList=[];
             res.data.data[3].forEach(element => {
                 this.coinGroupList.push(element)
             });
                res.data.data[4].forEach(element => {
                  this.coinGroupList.push(element)
             });
             })
            }
             if(this.coinType==10){
                this.$http.post('v1/articleList',{type: '17',pageSize: 15}).then((res)=>{
            this.coinGroupList=res.data.data;
             })
            }
            if(this.coinType==16){
                this.$http.post('v1/articleList',{type: '19',pageSize: 15}).then((res)=>{
            this.coinGroupList=res.data.data;
             })
            } 
            if(this.coinType==14){
                this.$http.post('v1/articleList',{type: '18',pageSize: 15}).then((res)=>{
            this.coinGroupList=res.data.data;
             })
            }
            if(this.coinType==3){
                this.$http.post('v1/articleList',{type: 20,pageSize: 15}).then((res)=>{
            this.coinGroupList=res.data.data;
             })
            }
        },
        coinGroupBtn(coin){
            this.$router.push({
          path: `/center/detail/${'?id='+coin.id}`
        });
        },
        handleClose(){
                this.$router.go(-1);
            },
    },
}
</script>
<style lang="less" scoped>
.mint-header {
    height: 100px;
    font-size: 32px;
    background-color: #222240 ;
    color: #E0E0F9;
}
.proposal{
    .flex{
        height:96px;
        background:rgba(34,34,64,1);
          display: flex;
        justify-content: space-between;
        margin-bottom: 2px;
          align-items: center;
          padding-left: 30px;
          padding-right: 30px;
          img{
              margin-right: 30px;
          }
    }
    a{
        color: #8686C0;
    }
}
    .center-main{
        color: #8686C0;
    }
.flex-between{
    display: flex;
justify-content: space-between;
}
.rotate{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
img{
    width: 30px;
    height: 30px;
}
}
 .drawer--tabs {
    height: 72px;
    line-height: 72px;
    border-bottom: 1px solid #222240;
    padding-left: 30px;
    left: 0;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    word-wrap: break-word;
    font-size: 0;
    background: #222240;
}
 .drawer--tabs span {
    font-size: 28px;
    font-weight: 500;
    margin-right: 60px;
    min-width: 50px;
    color: #E0E0F9
}
.load .active{
    border-bottom:4px solid #5298F1;
    height: 70px;
    color: #5298F1 !important;
}
 .drawer--tabs span i {
    vertical-align: unset
}

 .drawer--tabs span.cur {
    color: inherit
}
</style>